<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width" name="viewport">
    <title>社区商城</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/weui/1.1.1/style/weui.min.css">
<link rel="stylesheet" href="http://cdn.bootcss.com/jquery-weui/1.0.1/css/jquery-weui.min.css">
<link rel="stylesheet" href="css/demos.css">

    <style>
        .index_image {
            background: #fff;
            min-height: 90px;
            overflow-y: hidden;
            text-align: center;
        }
        .index_image a{
            color:#333;
        }        
        .index_image img {
            display: block;
            width: 50px;
            height: 50px;
            margin: 0 auto;
            border-radius:50%;            
        }
        .swiper-container {
            width: 100%;
        }
        #search_sure{
            height:24px;
            font-size:12px;
            padding:2px;
            line-height:24px;
            border-radius:5px;
            color:#fff;
            background:#89c5a9;
        }
        .weui-media-box__title span{
            color:#e3e64c;
        }
        .no_search{
            text-align:center;
            color:#da5a7d;
        }
        .no_search img{
            width:100%;
            height:200px;
        }
        #shopping{
            position:fixed;
            left:10;
            top:50%;
            width:40px;
            height:40px;
            cursor:pointer;
        }
        #shopping a{
            display:block;
            width:40px;
            height:40px;
            border-radius:50%;           
            text-align:center;
            line-height:50px;
            background-color:rgba(255,102,0,0.5);           

        }
        #shopping i{
         display:inline-block;
         width:20px;
         height:20px;
         background:url(./icon/shop.png) no-repeat;
         background-size:20px 20px;
         -webkit-font-smoothing: antialiased;         
        }
        #book_list > .col_50:nth-child(even){
            margin-left:2%
        }
    </style>
</head>
<body>
<div class="weui_tab">
<div class="weui-search-bar" id="searchBar">
  <form class="weui-search-bar__form">
    <div class="weui-search-bar__box">
      <i class="weui-icon-search"></i>
      <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="">
      <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
    </div>
    <label class="weui-search-bar__label" id="searchText">
      <i class="weui-icon-search"></i>
      <span>搜索</span>
    </label>
  </form>
  <a href="javascript:" id="search_sure">确定</a>
</div>  
    <div class="weui_tab_bd">
        <div class="swiper-container" data-space-between='10' >
            <div class="swiper-wrapper" >
                <div class="swiper-slide" ><img style="width:100%" src="images/banner1.jpg" alt=""></div>
                <div class="swiper-slide" ><img style="width:100%" src="images/banner2.jpg" alt=""></div>
                <div class="swiper-slide"><img style="width:100%" src="images/banner3.jpg" alt=""></div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <div class="weui-row">
            <div class="weui-col-25"><div class="index_image"><a href="#"><img src="./icon/icon_book.png">健康图书</a></div></div>
            <div class="weui-col-25"><div class="index_image"><a href="#"><img src="./icon/icon_book.png">健康图书</a></div></div>
            <div class="weui-col-25"><div class="index_image"><a href="#"><img src="./icon/icon_book.png">健康图书</a></div></div>
            <div class="weui-col-25"><div class="index_image"><a href="#"><img src="./icon/icon_book.png">健康图书</a></div></div>
        </div>
        <div class="weui-row">
            <div class="weui-col-25"><div class="index_image"><a href="#"><img src="./icon/icon_book.png">健康图书</a></div></div>
            <div class="weui-col-25"><div class="index_image"><a href="#"><img src="./icon/icon_book.png">健康图书</a></div></div>
            <div class="weui-col-25"><div class="index_image"><a href="#"><img src="./icon/icon_book.png">健康图书</a></div></div>
            <div class="weui-col-25"><div class="index_image"><a href="#"><img src="./icon/icon_book.png">健康图书</a></div></div>
        </div>
        <div id="book_list">
       
        </div>
        <div id="list" class='demos-content-padded'></div>
    </div>    
<div class="weui_tabbar" style="display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;position: fixed;bottom: 0;width: 100%;background-color: #f7f7fa;">
    <a href="javascript:;" class="weui-tabbar__item weui-bar__item--on">
      <div class="weui-tabbar__icon">
        <img src="./images/iconfont-home.png" alt="">
      </div>
      <p class="weui-tabbar__label">首页</p>
    </a>
    <a href="./cart.html" class="weui-tabbar__item">
      <div class="weui-tabbar__icon">
        <img src="./images/iconfont-cart.png" alt="">
      </div>
      <p class="weui-tabbar__label">视频</p>
    </a>
    <a href="./faxian.html" class="weui-tabbar__item">
      <div class="weui-tabbar__icon">
        <img src="./images/iconfont-faxian.png" alt="">
      </div>
      <p class="weui-tabbar__label">娱乐</p>
    </a>
    <a href="./wo.html" class="weui-tabbar__item">
      <div class="weui-tabbar__icon">
        <img src="./images/iconfont-wo.png" alt="">
      </div>
      <p class="weui-tabbar__label">我的宝箱</p>
    </a>
  </div>
</div>
<!--弹层-->
   <div id="up" class='weui-popup__container popup-bottom'>
      <div class="weui-popup__overlay"></div>
      <div class="weui-popup__modal">
        <div class="toolbar">
          <div class="toolbar-inner">
            <a href="javascript:;" class="picker-button close-popup">关闭</a>
            <h1 class="title">搜索页</h1>
          </div>
        </div>
        <div class="modal-content">
<div class="weui-panel weui-panel_access">
  <div class="weui-panel__bd" id="hao_search">

  </div>
</div>     
        </div>
      </div>
    </div>
<!--商城入口-->
<div id="shopping">
<a href="./pages/market.html">
<i></i>    
</a>    
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/jquery-weui/1.0.1/js/jquery-weui.min.js"></script>
<script src="js/swiper.js"></script>
<script src="js/myapp.js"></script>
<script>
    $(".swiper-container").swiper({
        loop: true,
        autoplay: 3000,
        pagination: '.swiper-pagination',
        paginationClickable: true
    });
    //图书类
//start
    var loading = false;  //状态标记
    var tbody="";
//初始加载
$.ajax({
    type:"get",
    url:"http://route.showapi.com/92-92?limit=&page=1&showapi_appid=32868&showapi_sign=37c9611696e648c9b5febf972ebffb99",
    dataType:"json",
    success:function(msg){
     var data_msg = msg.showapi_res_body.bookList;
     console.log(data_msg);
     for(var key in data_msg){
     var trs = "";
     trs +=            '<div class="col_50" style="box-sizing:border-box;float:left;background-color:#eee;margin-top:5px;width:49%">'+
                '<a href="./list.html?id='+data_msg[key].id+'">'+
                    '<div style="float:left;width:50%;word-wrap:break-word;color:#f2850f;padding:5px 0px 0px 5px;text-shadow:3px 3px 5px">'+
                    '<i>'+data_msg[key].name+'</i>'+                   
                    '</div>'+                    
            '<div style="float:right" style="width:50%"><img src="./images/book.png" style="width:60px;height:60px;padding:5px 5px 0px 0px"/></div>'+
                '</a>'+
                '<p style="float:left;color:#888;font-size:12px;width:100%;padding-left:2px">'+data_msg[key].author+"&nbsp【"+getclass(data_msg[key].bookclass)+'】</p>'+
                '</div>';
     tbody +=trs;
     };
     $("#book_list").append(tbody)      
    },
    error:function(){
        $.alert("网络错误")
    }
    });
//点赞
     function rel(){
       $.toast('点赞成功');

     };
     function sel(){
       $.toast("吐完了", "cancel"); 
     }  
//初始end
    var i = 1;    
        $(document.body).infinite().on("infinite", function() {
        tbody ="";       
        if(loading) return;
        loading = true;
        setTimeout(function(){
        i++;
        $.ajax({
    type:"get",
    url:"http://route.showapi.com/92-92?limit=&showapi_appid=32868&showapi_sign=37c9611696e648c9b5febf972ebffb99&page="+i,
    dataType:"json",
    beforeSend:function(){
    setTimeout(function(){                    
        $.showLoading();
        setTimeout(function(){
        $.hideLoading();
        },500)
        },500) 
    },
    success:function(msg){
     var data_msg = msg.showapi_res_body.bookList;
     for(var key in data_msg){
     var trs = "";
     trs +=                  '<div class="col_50" style="box-sizing:border-box;float:left;background-color:#eee;margin-top:5px;width:49%">'+
                '<a href="./list.html?id='+data_msg[key].id+'">'+
                    '<div style="float:left;width:50%;word-wrap:break-word;color:#f2850f;padding:5px 0px 0px 5px;text-shadow:3px 3px 5px">'+
                    '<i>'+data_msg[key].name+'</i>'+                   
                    '</div>'+                    
            '<div style="float:right" style="width:50%"><img src="./images/book.png" style="width:60px;height:60px;padding:5px 5px 0px 0px"/></div>'+
                '</a>'+
                '<p style="float:left;color:#888;font-size:12px;width:100%;padding-left:2px">'+data_msg[key].author+"&nbsp【"+getclass(data_msg[key].bookclass)+'】</p>'+
                '</div>';
     tbody +=trs;
     };
      $("#book_list").append(tbody)   
    },
    error:function(){
        $.alert("网络错误")
    }
    });                      
            
            loading = false;
        }, 2000);   //模拟延迟    
    //if(i>=8){$(document.body).destroyInfinite();}
    });
//搜索功能
var tbody1;
$('#search_sure').click(function(){
var tbody1 = "";
var setname = $('#searchInput').val();
var keyfont = encodeURIComponent(setname);
console.log(keyfont);
if(setname!=""){
    $.ajax({
        type:"get",
        url:"http://route.showapi.com/92-94?showapi_appid=32868&showapi_sign=37c9611696e648c9b5febf972ebffb99&typeId=&page=1&limit=3&keyword="+keyfont,
        dataType:"json",
        beforeSend:function(){
        setTimeout(function(){                    
        $.showLoading();
        setTimeout(function(){
        $.hideLoading();
        },100)
        },100)       
        },
        success:function(msg){
        var data = msg.showapi_res_body.bookList;
        if(data!=""){
for(var key in data){
        var trs = "";
        trs +=  '<a href="./list.html?id='+data[key].id+'" class="weui-media-box weui-media-box_appmsg">'+
                '<div class="weui-media-box__bd">'+
                '<h4 class="weui-media-box__title">'+data[key].name+"&nbsp<span>-"+data[key].author+'<span></h4>'+
                '<p class="weui-media-box__desc">'+data[key].content+'</p>'+
                '</div>'+
                '</a>';
        tbody1 += trs;
        }
$('#hao_search').html(tbody1)
$("#up").popup();
        }//数据不为空
        else{
var no_search =
          '<div class="no_search">'+
          '<p>没有结果!</p>'+
          '<img src="./images/cry.jpg"/>'+
          '</div>';
 $('#hao_search').html(no_search);           
 $("#up").popup();
        }
        },
        error:function(){
          $.alert("网络错误")  
        }
    })
} 
})


</script>
</body>
</html>